import { View, Input, Button, Text, Icon } from '@tarojs/components'
import { useState } from 'react'
import './list.less'
function List(props) {
  let [state, setState] = useState({
    todo: '',
    list: [{ id: Math.random(), text: "hello" }]
  })
  const add = () => {
    if (!state.todo) return;
    setState({
      ...state,
      list: state.list.concat({ id: Math.random(), text: state.todo }),
      todo: ''
    })
  }
  const del = (item) => {
    setState({
      ...state,
      list: state.list.filter(val => val.id != item.id)
    })
  }
  return (
    <View className='list_box'>
      <Input className='inp_box' value={state.todo} onInput={(e) => { setState({ ...state, todo: e.target.value }) }} />
      <Button onClick={add}>提交</Button>
      {
        state.list.map(item => {
          return <View key={item.id}>
            <Text>{item.text}</Text>
            <Icon size='20' type='cancel' onClick={del.bind(null, item)} />
          </View>
        })
      }
    </View>
  )
}

export default List